<template>
  <Flex justify="center">
    <Upload
      :action="fileData.host"
      :accept="accept"
      :before-upload="onBeforeUpload"
      :fileList="fileList"
      :data="fileData"
      @change="handleChange"
    >
      <div class="upload-wrap" v-if="!loading">
        <p class="upload-wrap_icon text-center text-2xl">
          <CloudUploadOutlined
            :style="{ color: colorPrimary, fontSize: '80px' }"
          ></CloudUploadOutlined>
        </p>
        <p class="upload-wrap_description">
          <span>将文件拖到此处，或</span
          ><a :style="{ color: colorPrimary }">点击上传</a>
        </p>
      </div>
      <div v-else class="upload-wrap">
        <Spin tip="文件上传中..." class="uploading"></Spin>
      </div>
    </Upload>
  </Flex>
  <p class="py-5 text-center">
    <span>请上传 格式为 rvt，rfa，dwg，dxf，skp，ifc，dgn，obj 的文件</span>
  </p>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import { CloudUploadOutlined } from '@ant-design/icons-vue';
import {
  Flex,
  Spin,
  Upload,
  UploadProps,
  message,
  theme,
} from 'ant-design-vue';
import type { UploadChangeParam } from 'ant-design-vue';
import { getFileUpdatePolicy, getFileUploadPolicy } from '../api';

interface Props {
  currentType: string;
  fileItemId?: [string, number];
}
const fileList = ref([]);
const loading = ref(false);
const accept = 'rvt，rfa，dwg，dxf，skp，ifc，dgn，obj';
const fileData = ref({
  host: 'bf-prod-srcfile.oss-cn-beijing.aliyuncs.com',
});
const emits = defineEmits<{
  success: [value: string];
}>();
const props = defineProps<Props>();

const { defaultAlgorithm, defaultSeed } = theme;
const { colorPrimary } = defaultAlgorithm(defaultSeed);

const onBeforeUpload: UploadProps['beforeUpload'] = async (file) => {
  loading.value = true;
  const type = file.name.split('.').pop().toLowerCase();
  const isAccept = accept.includes(type!);
  if (!isAccept) {
    fileList.value = [];
    message.info(`请上传${accept}格式图片!`);
    loading.value = false;
    return;
  }
  fileList.value.push(file);
  const api =
    props.currentType === 'upload' ? getFileUploadPolicy : getFileUpdatePolicy;
  const result = await api({
    fileName: file.name,
    fileItemId: props.fileItemId,
  });
  fileData.value = {
    url: result.data.host,
    key: result.data.objectKey,
    OSSAccessKeyId: result.data.accessId,
    callback: result.data.callbackBody,
    success_action_status: 200,
    ...result.data,
  };
  return true;
};

const handleChange = ({ file }: UploadChangeParam) => {
  if (file.status !== 'uploading') {
  }
  if (file.status === 'done') {
    message.success('操作成功!');
    emits('success', file.response.data);
    loading.value = false;
  } else if (file.status === 'error') {
    message.info('操作失败!');
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.upload-wrap {
  width: 384px;
  height: 192px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 4px;
  border: 1px solid #eee;
  .uploading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  &_icon {
    text-align: center;
    font-size: 24px;
  }
  &_description {
  }
}
</style>
